<template>
	<view class="box">
		<view class="bg"></view>
		<view class="auth" v-if="!isAuthMixi" @click="toLogin" :style="{paddingTop: top + height + 'px'}">
			<image src="/static/avatar.png" mode=""></image>
			游客
		</view>
		<view class="header" :style="{paddingTop: top + height + 'px'}" v-else>
			<image :src="userInfo.avatar" mode="" class="header-avatar"></image>
			<view>
				<view class="header-title">Hi {{ userInfo.nickname }}</view>
				<view class="header-subTitle">欢迎回来！</view>
			</view>

		</view>
		<view class="swiper">
			<swiper class="swiper-item" autoplay next-margin="50rpx" previous-margin="50rpx">
				<swiper-item v-for="it in bannerList">
					<view class="swiper-item-list">
						<image :src="it.cover" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tabs">
			<view class="tabs-item" @click="toPage('预约体检')" v-if="is_show == 0">
				<image src="../../static/医院.png" mode=""></image>
				预约体检
			</view>
			<view class="tabs-item" @click="toPage('我的推广')">
				<image src="../../static/地图.png" mode=""></image>
				我的推广
			</view>
			<view class="tabs-item" @click="toPage('我的提现')">
				<image src="../../static/手机.png" mode=""></image>
				我的提现
			</view>
			<view class="tabs-item" @click="toPage('我的订单')">
				<image src="../../static/2.png" mode=""></image>
				我的订单
			</view>
		</view>
		<view class="tip">
			<view class="tip-l">推广有好礼哦～～</view>
			<view class="tip-r">
				立即推广
				<button open-type="share"></button>
			</view>
		</view>
		<view class="title">推荐机构</view>
		<view class="list">
			<view class="list-item" v-for="it in hospital" @click="is_show == 0 ? toDetail(it.id) : ''">
				<image :src="it.img" mode="aspectFill"></image>
				<view class="list-item-title">{{it.title}}</view>
				<view class="list-item-subTitle">
					<view class="list-item-subTitle-l">{{it.address || ''}} {{it.explan || ''}}</view>
					<view class="list-item-subTitle-r">{{it.juli || 0}} KM</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		indexData
	} from '@/common/http/api.js'

	export default {
		data() {
			return {
				top: 0,
				height: 0,
				params: {
					page: 1,
					lat: '',
					lng: ''
				},
				isList: true,
				bannerList: [],
				hospital: [],
				userInfo: {},
				content: '',
				is_show: 1 //0 显示
			}
		},
		onLoad(e) {
			if(e.userId) {
				this.$store.commit('setShareId', e.userId)
			}
			if(e.pid) {
				this.$store.commit('setShareId', e.pid)
			}
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();
			console.log("Menu button rect:", menuButtonRect);
			this.top = menuButtonRect.top
			this.height = menuButtonRect.height
			// 获取当前位置
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.params.lat = res.latitude
					this.params.lng = res.longitude
					console.log('纬度:', res);
					this.init()
				},
				fail: function(err) {
					console.error('获取位置失败', err);
					uni.showToast({
						title: "获取位置失败，请允许授权！",
						icon: 'none'
					})
				}
			});
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo) {
				this.userInfo = userInfo
			}
		},
		onPullDownRefresh: function() {
			console.log('我被下拉了');
			this.reload(1)
		},
		onReachBottom() {
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		methods: {
			toBanner(it){
				if (!this.isAuthMixi) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: it.url
				})
			},
			toDetail(id) {
				if (!this.isAuthMixi) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/physicalExamination/physicalExamination?id=' + id
				})
			},
			toPage(name) {
				if (!this.isAuthMixi) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				switch (name) {
					case '预约体检':
						this.toDetail(this.hospital[0].id)
						break;
					case '我的推广':
						uni.navigateTo({
							url:'/pages/my-promotion/my-promotion'
						})
						break;
					case '我的订单':
						uni.navigateTo({
							url:'/pages/order-history/order-history'
						})
						break;
					case '我的提现': 
						uni.navigateTo({
							url:'/pages/myCommission/myCommission'
						})
						break;
					default:
						break;
				}
			},
			reload(type) {
				this.params.page = 1
				this.hospital = []
				this.init(type)
			},
			//0 默认 1 上拉
			init(type = 0) {
				indexData(this.params).then(res => {
					this.is_show = res.data.res
					this.bannerList = res.data.bannerList
					this.content = res.data.introduce.content
					uni.hideLoading()
					if (Array.isArray(res.data.hospital) && res.data.hospital.length > 0) {
						if (this.params.page === 1) {
							this.hospital = res.data.hospital
						} else {
							this.hospital = this.hospital.concat(res.data.hospital)
						}
					} else {
						this.isList = false
					}
				}).finally(e=>{
					if(type === 1) {
						uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.auth {
		width: 670rpx;
		height: 143rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		margin-bottom: 24rpx;

		image {
			width: 143rpx;
			height: 143rpx;
			margin-right: 36rpx;
		}
	}

	.box {
		position: relative;
		overflow: hidden;
	}

	.bg {
		width: 750rpx * 5;
		height: 750rpx * 5;
		background: #0065FF;
		position: absolute;
		top: -375rpx * 9;
		left: -375rpx * 4;
		z-index: -1;
		border-radius: 50%;
	}

	.header {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-left: 48rpx;
		margin-bottom: 30rpx;

		.header-avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}

		&>view {
			flex: 1;
			min-width: 0;
			margin-left: 24rpx;
		}

		.header-title {
			color: #ffffff;
			font-family: "PingFang SC";
			font-size: 34rpx;
			font-style: normal;
			font-weight: 400;
			margin-bottom: 10rpx;
		}

		.header-subTitle {
			color: #9ebaed;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
		}
	}

	.swiper {
		width: 686rpx;
		height: 380rpx;
		border-radius: 16rpx;
		background: #fff;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.swiper-item {
			width: 100%;
			height: 316rpx;

			.swiper-item-list {
				width: 100%;
				height: 316rpx;
				display: flex;
				box-sizing: border-box;
				padding: 0 20rpx;

				image {
					width: 578rpx;
					height: 316rpx;
					margin: 0 auto;
					border-radius: 28rpx;
				}
			}
		}
	}

	.tabs {
		margin: 0 auto;
		width: 686rpx;
		height: 202rpx;
		flex-shrink: 0;
		border-radius: 24rpx;
		background: #FFF;
		box-shadow: 0 80rpx 40rpx 0 #00000005, 0 32rpx 12rpx 0 #00000005, 0 0 2rpx 0 #00000005;
		display: flex;
		margin-bottom: 20rpx;

		.tabs-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #112950;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;

			image {
				width: 68rpx;
				height: 64rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.tip {
		width: 690rpx;
		height: 108rpx;
		flex-shrink: 0;
		background: linear-gradient(86deg, #EEDFC0 3.39%, #EEDFC0 97.1%);
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 24rpx;
		align-items: center;
		border-radius: 24rpx;
		margin-bottom: 32rpx;

		.tip-l {
			color: #333333;
			font-family: "PingFang SC";
			font-size: 26rpx;
			font-style: normal;
			font-weight: 400;
		}

		.tip-r {
			width: 128rpx;
			height: 50rpx;
			background: #333333;
			border-radius: 26rpx;
			color: #eedfc0;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
				opacity: 0;
			}
		}
	}

	.title {
		margin-bottom: 18rpx;
		color: #112950;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 400;
		box-sizing: border-box;
		padding-left: 30rpx;
	}

	.list {
		width: 690rpx;
		margin: 0 auto;

		.list-item {
			width: 100%;
			flex-shrink: 0;
			border-radius: 24rpx;
			border: 2rpx solid #F2F4F5;
			background: #FFF;
			box-sizing: border-box;
			padding: 32rpx;
			margin-bottom: 24rpx;

			image {
				height: 256rpx;
				width: 100%;
				margin-bottom: 24rpx;
			}

			.list-item-title {
				color: #112950;
				font-family: "PingFang SC";
				font-size: 28rpx;
				margin-bottom: 8rpx;
			}

			.list-item-subTitle {
				width: 100%;
				display: flex;

				.list-item-subTitle-l {
					flex: 1;
					min-width: 0;
					color: #b2bac6;
					font-family: "PingFang SC";
					font-size: 22rpx;
				}

				.list-item-subTitle-r {
					margin-left: 20rpx;
					color: #b2bac6;
					font-family: "PingFang SC";
					font-size: 22rpx;
				}
			}
		}
	}
</style>